<template>
  <el-input
    ref="elInput"
    v-model="valueModel"
    v-bind="$props.props"
    v-on="$listeners"
  >
    <template
      v-for="(slot, slotName) in slots"
      :slot="slotName"
    >
      <component
        :is="extendComponent(slot)"
        :key="slotName"
        :form="form"
      />
    </template>
  </el-input>
</template>

<script>
import Vue from 'vue';
import {Input} from "element-ui";

Vue.use(Input);
/**
 * 输入框
 * @author maolin
 */
export default {
  name: "ErpFormInput",
  components: {
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
    /**
     * 插槽
     * @public
     */
    slots: {
      type: Object,
      default () {
        return {
          prefix: '',
          suffix: '',
          prepend: '',
          append: '',
        };
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default: () => {}
    },
    /**
     * [属性](https://element.eleme.cn/2.13/#/zh-CN/component/input#input-attributes)
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
          // string text，textarea 和其他 原生 input 的 type 值
          type: 'text',
          // number 原生属性，最大输入长度
          maxlength: undefined,
          // number 原生属性，最小输入长度	number
          minlength: undefined,
          // boolean 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效
          showWordLimit: false,
          // string 输入框占位文本
          placeholder: '',
          // boolean	是否可清空
          clearable: true,
          // boolean 禁用
          disabled: false,
          // string 输入框头部图标
          prefixIcon: '',
          // string 输入框尾部图标
          suffixIcon: '',
          // number 输入框行数，只对 type="textarea" 有效
          rows: '',
          // boolean / object 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
          autosize: false,
          // string 原生属性，自动补全(on, off)
          autocomplete: 'off',
          // string 原生属性
          name: undefined,
          // boolean	原生属性，是否只读
          readonly: false,
          // 原生属性，设置最大值
          max	: undefined,
          // 原生属性，设置最小值
          min: undefined,
          // 原生属性，设置输入字段的合法数字间隔
          step: undefined,
          // string 控制是否能被用户缩放(none, both, horizontal, vertical)
          resize: undefined,
          // boolean 原生属性，自动获取焦点
          autofocus: false,
          // string 原生属性
          form: undefined,
          // string 输入框关联的label文字
          label: undefined,
          // string 输入框的tabindex
          tabindex: undefined,
          // boolean 输入时是否触发表单的校验
          validateEvent: true,
        };
      }
    },
    /**
     * 额外配置
     * ```js
     * return {
        // 额外关联字段 field 表单中需要的字段
        // extraData: [
        //     {field: 'userId'}
        // ]
      }
     * ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  computed: {
    extraCom () {
      const defaultConfig = {
        // 额外关联字段 field 表单中需要的字段
        // extraData: [
        //     {field: 'userId'}
        // ]
      };
      return Object.assign(defaultConfig, this.extra);
    },
    extendComponent () {
      return function (slotTemplate) {
        if (slotTemplate) {
          return Vue.component('ExtendComponent', (resolve, reject) => {
            resolve({
              props: ['form'],
              template: "<span>" + slotTemplate + "</span>"
            });
          });
        }
        return false;
      };
    },
    valueModel: {
      get () {
        return this.value;
      },
      set (val) {
        this.$emit('value-change', val);
        // 传递关联值
        let obj = {};
        if (this.extraData && this.extraData.length > 0) {
          for (let i in this.extraData) {
            obj[this.extraData[i].field] = val;
          }
        }
        if (obj !== {}) {
          this.$emit('update-id-field', obj);
        }
      }
    },
    extraData () {
      return this.extraCom && this.extraCom.extraData ?  this.extraCom.extraData : [];
    },
    inputFunction () {
      if (this.extra && this.extra.inputFunction) {
        return this.extra.inputFunction();
      }
      return '';
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    /**
     * 输入框获取焦点
     * @public
     */
    focus () {
      this.$refs.elInput.focus();
    },
    /**
     * 输入框失去焦点
     * @public
     */
    blur () {
      this.$refs.elInput.blur();
    },
    /**
     * 输入框选中选项
     * @public
     */
    select () {
      this.$refs.elInput.select();
    },
    /**
     * 输入框输入内容
     * @public
     */
    handleInput (e) {
      let val = e;
      if (this.inputFunction) {
        val = this.getValueFromFunction(val);
      }
      this.valueModel = val;
    },
    /**
     * 从表单中获取值
     * @public
     */
    getValueFromFunction (val) {
      try{
        return new Function('value','field', this.inputFunction)(val, this.field);
      }catch (e) {
        console.log(e);
      }
      return val;
    }
  }
};
</script>

<style scoped>

</style>
